<template>
  <view class="content">
    <text>充值金额</text>
    <view class="body">
      <u-radio-group
          v-model="payAmount"
          iconPlacement="right">
        <u-radio v-for="(item,index) in payAmountList"
                 :key="index"
                 :label="item.label"
                 :name="item.value">
        </u-radio>
      </u-radio-group>
    </view>
    <view class="bottom">
      <u-button @click="paySubOrder()">充值</u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive, toRefs } from 'vue';
import modal from "@/plugins/modal";
import { subOrder, subPay } from "@/api/pay/pay";

const data = reactive({
  payAmountList: [
    {
      label: '100元',
      value: 10000
    },
    {
      label: '50元',
      value: 5000
    },
    {
      label: '30元',
      value: 3000
    },
    {
      label: '0.01元',
      value: 1
    }
  ],
  payAmount: 1
});

const { payAmountList, payAmount } = toRefs(data);


function paySubOrder() {
  modal.loading("充值中...")
  let params = {
    totalAmount: payAmount.value + '',
    payType: "wxJsApi",
    orderContent: "充值"
  }
  subOrder(params).then(res => {
    if (res.code == 200){
      subPay("wxJsApi",res.data.orderNumber).then(resp => {
        console.log(resp)
        if (resp.code == 200){
          //将string转换成json对象
          let data = JSON.parse(resp.data)
          wx.requestPayment({
            timeStamp: data.timestamp,
            nonceStr: data.nonceStr,
            package: data.packageVal,
            signType: data.signType,
            paySign: data.paySign,
            success: function (res) {
              if (res.errMsg == "requestPayment:ok"){
                modal.closeLoading()
                modal.msgSuccess("充值成功")
                uni.navigateBack();
              }
            },
            fail: function (res) {
              modal.msgError("充值失败:" +res.errMsg)
            }
          })
        }
      })
    }
  })
}
</script>

<style scoped>

</style>